/*
* 有时候想展示list类型的数据 但是可能只有一列
* 又不想引入表格 由此  这个组件产生了
* */
layui.define(['jquery', 'element'], function(exports) {
    "use strict";

    const MOD_NAME = 'list';

    const defaultMethod = "GET"
    const defaultTitle = "title"

    // 初始化
    var dataList = function (opt) {
        this.option = opt;
    };

    // 渲染开始
    dataList.prototype.render = function (opt) {
        let option = {
            elem: opt.elem,
            url: opt.url,
            title:opt.title? opt.title:defaultTitle,
            method: opt.method ? opt.method : defaultMethod,
            defaultOpen: opt.defaultOpen,
            defaultSelect: opt.defaultSelect,
            control: opt.control,
            height: opt.height,
            theme: opt.theme,
            data: opt.data ? opt.data : [],
            change: opt.change ? opt.change : function () { },
            done: opt.done ? opt.done : function () { }
        }
        if(option.data.length > 0){
            if(Array.isArray(option.data)){
                renderArr(option)
                return new dataList(option);
            }
            renderList(option);
        }
        if (option.method === defaultMethod) {
            getListData(option.url).then(res=>{
                console.log(res)
                // 渲染页面
                if(!res.success){
                   return renderErr(option);
                }
                option.data = res.data
                renderList(option);
            });
        }
        else{
            postListData(option.url).then(res=>{
                // 渲染页面
                if(!res.success){
                    return renderErr(option);
                }
                option.data = res.data
                renderList(option);
            })
        }
        // 记得要返回当前对象出去
        return new dataList(option);
    }

    /**
     * 元素的点击事件
     * @param clickEvent 点击触发的回调函数 第一个参数 当前点击元素的JQ对象  第二个当前点击的元素
     */
    dataList.prototype.click = function (clickEvent) {
        var _this = this;

        // 给元素绑定事件
        $("body").on("click", "#" + _this.option.elem+' dd', function () {
            let dom = $(this)
            // 点击时 添加背景色
            $(`#${_this.option.elem} .dd`).css("background-color","")
            dom.css("background-color","#f8f8f8")
            let index = dom.attr("fast-index");
            clickEvent(dom,_this.option.data[index]);
        })
    }

    /**
     * 获取请求数据
     * @param url 请求地址
     * @returns {*}
     */
    function getListData(url) {
        var defer = $.Deferred();
        var symbol = url.indexOf('?') !== -1 ? '&' : '?';
        $.get(url + symbol + "fresh=" + Math.random(), function (result) {
            defer.resolve(result)
        });
        return defer.promise();
    }

    /**
     * POST 请求数据
     * @param url
     * @returns {*}
     */
    function postListData(url) {
        var defer = $.Deferred();
        var symbol = url.indexOf('?') !== -1 ? '&' : '?';
        $.post(url + symbol + "fresh=" + Math.random(), function (result) {
            defer.resolve(result)
        }, "json");
        return defer.promise();
    }

    /**
     * 渲染页面 目标标签如下
     <div class="fast_list">
         <dl class="" >
             <dd lay-value="" class="layui-select-tips layui-this">请选择</dd>
             <dd lay-value="AAA" class="">选项 A</dd>
             <dd lay-value="BBB" class="">选项 B</dd>
             <dd lay-value="CCC" class="">选项 C</dd>
         </dl>
     </div>

     * @param option
     */
    function renderList(option){
        let ddHtml = `<dl class="" >`
        $.each(option.data, function (i, item) {
            ddHtml += `<dd lay-value="${item[option.title]}" fast-index="${i}" class="dd">
                <i class="layui-icon layui-icon-success"></i>
                ${item[option.title]}
               </dd>`
        })
        ddHtml += `</dl>`
        $('#'+option.elem).html(ddHtml);
    }

    /**
     * 渲染成一个数组
     * @param option
     */
    function renderArr(option){
        let ddHtml = `<dl class="" >`
        $.each(option.data, function (i, item) {
            ddHtml += `<dd lay-value="${item[i]}" fast-index="${i}" class="dd">
             <i class="layui-icon layui-icon-success"></i>
                ${item}
            </dd>`
        })
        ddHtml += `</dl>`
        $('#'+option.elem).html(ddHtml);
    }

    /**
     * 非200状态码渲染提示信息
     * @param option
     */
    function renderErr(option){
        let ddHtml = `<blockquote class="layui-elem-quote">
          注意返回数据格式
        </blockquote>`
        $(option.elem).html(ddHtml);
    }


    exports(MOD_NAME, new dataList());
});